<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>领养猫咪展示</title>
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/adopt/indexCss.css" type="text/css">
    <link rel="stylesheet" href="../../css/adopt/adoptCatCss.css" type="text/css">
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css" media="all">
</head>

<body>

    <!-- 导航栏 -->
    <ul class="layui-nav" id="header">
        <div class="container">
            <li class="layui-nav-item"><a href="/MagicFrog/index.html"><b style="font-size: 20px;">膜蛤猫舍</b></a></li>
            <li class="layui-nav-item layui-this"><a href="/MagicFrog/views/foster/foster.html">寄养猫咪</a></li>
            <li class="layui-nav-item"><a href="/MagicFrog/views/adopt/adoptCat.html">领养猫咪</a></li>
            <li class="layui-nav-item"><a href="/MagicFrog/views/personal/aboutus.html">关于我们</a></li>
            <ul class="navbar-right">
                <li class="layui-nav-item">
                    <a href="/MagicFrog/views/personal/personal-center.html">个人中心</a>
                </li>
                <li class="layui-nav-item" lay-unselect="">
                    <a href="/MagicFrog/views/personal/personal-center.html"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
                    <dl class="layui-nav-child">
                        <dd><a href="#">修改信息</a></dd>
                        <dd><a href="#">安全管理</a></dd>
                        <dd><a href="#">退了</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="#contactus">联系我们</a></li>
            </ul>
        </div>
    </ul>



    <div class="layui-carousel container" id="test1" style="background: none;margin-top: 30px">
        <div carousel-item="">
            <div><img class="carousel-img" src="../../imgs/adopt_c1.jpg" alt=""></div>
            <div><img class="carousel-img" src="../../imgs/adopt_m1.jpg" alt=""></div>
            <div><img class="carousel-img" src="../../imgs/adopt_img1.jpg" alt=""></div>
            <div><img class="carousel-img" src="../../imgs/adopt_c1.jpg" alt=""></div>
            <div><img class="carousel-img" src="../../imgs/adopt_c1.jpg" alt=""></div>
        </div>
    </div>

    <!-- 按种类查询猫咪 -->
    <div class='container' style='margin-top:20px;margin-bottom:20px'>
        <div class='row'>
            <div class='col-md-3'>
                <select class='form-control' id='' onchange='changeType(this)'>

                    <option value='-1'>===请您选择猫咪类型===</option>
                    <option value='0'>无毛猫</option>
                    <option value="1">波斯猫</option>
                    <option value="2">蓝猫</option>

                </select>
            </div>
            <div class='col-md-3'>
                <div class='input-group'>
                    <input type='text' class='form-control' id='' value='' placeholder="请您输入猫咪的类型">
                    <span class='input-group-btn'>
                        <button class='btn btn-default' type='button' onclick='selectAll()'>查询</button>
                    </span>
                </div>
            </div>
        </div>
    </div>


    <!-- 领养猫咪展示 -->
    <div class='container'>
        <div class='row'>

            <div class='col-md-4'>
                <div class='thumbnail'>

                    <a href='catInfo.html'><img src='../../imgs/adopt_m5.jpg' alt='通用的占位符缩略图'></a>
                    <div class='caption' style='overflow:hidden'>
                        <a href='#'>
                            <h3 align='center' class='text-success'>这里是猫咪的类型</h3>
                        </a>
                        <p style='text-align:center'>这里是价格</p>

                        <p style='text-align:center;'>这是一只猫咪</p>

                        <p style='text-align:center'>
                            <button type="button" class="layui-btn layui-btn-radius layui-btn-primary"
                                onclick="">点击收藏</button>
                        </p>
                    </div>
                </div>
            </div>
            <div class='col-md-4'>
                <div class='thumbnail'>

                    <a href='catInfo.html'><img src='../../imgs/adopt_m5.jpg' alt='通用的占位符缩略图'></a>
                    <div class='caption' style='overflow:hidden'>
                        <a href='#'>
                            <h3 align='center' class='text-success'>这里是猫咪的类型</h3>
                        </a>
                        <p style='text-align:center'>这里是价格</p>

                        <p style='text-align:center;'>这是一只猫咪</p>

                        <p style='text-align:center'>
                            <button type="button" class="layui-btn layui-btn-radius layui-btn-primary"
                                onclick="">点击收藏</button>
                        </p>

                    </div>
                </div>
            </div>
            <div class='col-md-4'>
                <div class='thumbnail'>

                    <a href='catInfo.html'><img src='../../imgs/adopt_m5.jpg' alt='通用的占位符缩略图'></a>
                    <div class='caption' style='overflow:hidden'>
                        <a href='#'>
                            <h3 align='center' class='text-success'>这里是猫咪的类型</h3>
                        </a>
                        <p style='text-align:center'>这里是价格</p>

                        <p style='text-align:center;'>这是一只猫咪</p>

                        <p style='text-align:center'>
                            <button type="button" class="layui-btn layui-btn-radius layui-btn-primary"
                                onclick="">点击收藏</button>
                        </p>

                    </div>
                </div>
            </div>
            <div class='col-md-4'>
                <div class='thumbnail'>

                    <a href='catInfo.html'><img src='../../imgs/adopt_m5.jpg' alt='通用的占位符缩略图'></a>
                    <div class='caption' style='overflow:hidden'>
                        <a href='#'>
                            <h3 align='center' class='text-success'>这里是猫咪的类型</h3>
                        </a>
                        <p style='text-align:center'>这里是价格</p>

                        <p style='text-align:center;'>这是一只猫咪</p>

                        <p style='text-align:center'>
                            <button type="button" class="layui-btn layui-btn-radius layui-btn-primary"
                                onclick="">点击收藏</button>
                        </p>

                    </div>
                </div>
            </div>
            <div class='col-md-4'>
                <div class='thumbnail'>

                    <a href='catInfo.html'><img src='../../imgs/adopt_m5.jpg' alt='通用的占位符缩略图'></a>
                    <div class='caption' style='overflow:hidden'>
                        <a href='#'>
                            <h3 align='center' class='text-success'>这里是猫咪的类型</h3>
                        </a>
                        <p style='text-align:center'>这里是价格</p>

                        <p style='text-align:center;'>这是一只猫咪</p>

                        <p style='text-align:center'>
                            <button type="button" class="layui-btn layui-btn-radius layui-btn-primary"
                                onclick="">点击收藏</button>
                        </p>

                    </div>
                </div>
            </div>
            <div class='col-md-4'>
                <div class='thumbnail'>

                    <a href='catInfo.html'><img src='../../imgs/adopt_m5.jpg' alt='通用的占位符缩略图'></a>
                    <div class='caption' style='overflow:hidden'>
                        <a href='#'>
                            <h3 align='center' class='text-success'>这里是猫咪的类型</h3>
                        </a>
                        <p style='text-align:center'>这里是价格</p>

                        <p style='text-align:center;'>这是一只猫咪</p>

                        <p style='text-align:center'>
                            <button type="button" class="layui-btn layui-btn-radius layui-btn-primary"
                                onclick="">点击收藏</button>
                        </p>

                    </div>
                </div>
            </div>
            <div class='col-md-4'>
                <div class='thumbnail'>


                    <a href='catInfo.html'><img src='../../imgs/adopt_m5.jpg' alt='通用的占位符缩略图'></a>
                    <div class='caption' style='overflow:hidden'>
                        <a href='#'>
                            <h3 align='center' class='text-success'>这里是猫咪的类型</h3>
                        </a>
                        <p style='text-align:center'>这里是价格</p>

                        <p style='text-align:center;'>这是一只猫咪</p>

                        <p style='text-align:center'>
                            <button type="button" class="layui-btn layui-btn-radius layui-btn-primary"
                                onclick="">点击收藏</button>
                        </p>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="container">
        <div>
            <h3 id="welcome">联系我们</h3>
        </div>
        <div class="col-md-4">
            <h4>
                <i class="	glyphicon glyphicon-map-marker"></i>&nbsp;&nbsp;Location
            </h4>
            <p>345 Setwant natrer,</p>
            <p>Metropolitan, Italy.</p>
        </div>
        <div class="col-md-4">
            <h4>
                <i class="glyphicon glyphicon-earphone"></i>&nbsp;&nbsp;PHONE
            </h4>
            <p>+1(401) 1234 567.</p>
            <p>+1(804) 4261 150.</p>
        </div>
        <div class="col-md-4">
            <h4>
                <i class="glyphicon glyphicon-envelope"></i>&nbsp;&nbsp;E-MAIL
            </h4>
            <p>
                <a href="mailto:info@example.com">Example1@gmail.com</a>
            </p>
            <p>
                <a href="mailto:info@example.com">Example2@gmail.com</a>
            </p>
        </div>
    </div>


    <script src="../../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../plugins/jquery/jquery.min.js"></script>
    <script src="../../plugins/layui/layui.js" charset="utf-8"></script>

    <script>
        layui.use('carousel', function () {
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1'
                , width: '90%' //设置容器宽度
                , height: '400px'
                , arrow: 'hover' //始终显示箭头
                , anim: 'fade' //切换动画方式
            });
        });
    </script>
</body>

</html>